import 'package:bxultimate/app/pages/shop/shop_index/widget/around.dart';
import 'package:bxultimate/app/theme/app_theme.dart';
import 'package:bxultimate/app/theme/gaps.dart';
import 'package:bxultimate/data/store/config_store.dart';
import 'package:bxultimate/widgets/indicators/material_indicator.dart';
import 'package:bxultimate/widgets/keep_alive.dart';
import 'package:bxultimate/widgets/mk_load_image.dart';
import 'package:bxultimate/widgets/mk_page.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:marquee/marquee.dart';
import 'package:tdesign_flutter/tdesign_flutter.dart';

import 'controller.dart';

class ShopIndexPage extends StatefulWidget {
  const ShopIndexPage({Key? key}) : super(key: key);

  @override
  State<ShopIndexPage> createState() => _ShopIndexPageState();
}

class _ShopIndexPageState extends State<ShopIndexPage> {
  final controller = Get.find<ShopIndexController>();
  final state = Get.find<ShopIndexController>().state;

  _buildModule() {
    return Container(
      width: Get.width,
      height: 160,
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(AppTheme.iDefaultRadius),
      ),
      child: GridView.count(
        scrollDirection: Axis.horizontal,
        crossAxisCount: 2,
        children: [
          for (var i = 0; i < state.shopCategoryList.length; i++)
            _buildModuleItem(i),
        ],
      )
    );
  }

  _buildModuleItem(i) {
    return GestureDetector(
      onTap: (){
        controller.toShopCategory(i);
      },
      child: Container(
          width: (Get.width - AppTheme.iDefaultPadding * 2) / 4,
          padding: EdgeInsets.all(AppTheme.iDefaultPadding),
          child: Column(children: [
            MkLoadImage(
              ConfigStore.to.baseFileUrl + state.shopCategoryList[i].icon!,
              width: 30,
              height: 30,
            ),
            Gaps.vGap8,
            Text(
              state.shopCategoryList[i].name!,
              style: TextStyle(fontSize: 12),
            )
          ])),
    );
  }

  _buildBody() {
    return Padding(
      padding: EdgeInsets.all(AppTheme.iDefaultPadding),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _buildModule(),
          Gaps.vGap8,
          Container(
            padding: EdgeInsets.all(AppTheme.iDefaultPadding / 2),
            decoration: BoxDecoration(color: Color(0xffFFDAD0)),
            height: 30,
            child: Row(
              children: [
                TDTag(
                  '消息通知',
                  theme: TDTagTheme.primary,
                  size: TDTagSize.small,
                ),
                Gaps.hGap8,
                Expanded(
                  child: Marquee(
                    text: '弘扬正能量，传递真善美！请凭借相关证件享受优惠...',
                    style: TextStyle(fontSize: 12, color: Color(0xffFF8362)),
                  ),
                )
              ],
            ),
          ),
          Gaps.vGap8,
          Container(
            alignment: Alignment.topLeft,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                TabBar(
                  isScrollable: true,
                  indicator: MaterialIndicator(
                    color: Color(0xffFF8362)
                  ),
                  indicatorColor: Color(0xFFFF8362),
                  unselectedLabelColor: Color(0xFF606266),
                  labelColor: Colors.black,
                  unselectedLabelStyle: TextStyle(fontSize: 14),
                  labelStyle:
                      TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
                  tabs: controller.tabItem
                      .map((e) => Tab(child: Text(e)))
                      .toList(),
                  controller: controller.tabController,
                ),
              ],
            ),
          ),
          Gaps.vGap8,

          Expanded(
              child: TabBarView(
                controller: controller.tabController,
                children: [
                  KeepAliveWrapper(
                    child: AroundTabItemView(showType: "selected"),
                  ),
                  KeepAliveWrapper(
                    child: AroundTabItemView(showType: "around"),
                  ),
                ],
              ))
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return MkPage(
      child: Scaffold(
        backgroundColor: Colors.transparent,

        body: SafeArea(
          child: _buildBody(),
        ),
      ),
    );
  }
}
